<template>
  <div class="main-box">
    <el-row>
      <div class="title-box">
        <el-text class="title">我的订单</el-text>
      </div>
    </el-row>
    <el-row class="searchArea">
      <el-form label-width="150px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="订单编号">
              <el-input v-model="data.select.OrderId">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户名称">
              <el-input v-model="data.select.client">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态">
              <el-select v-model="data.select.statusBack" placeholder="全部状态">
                <el-option v-for="status in data.select.status" :label="status.descs"
                           :value="status.descs"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="">
              <el-button @click="selectBtn" type="success" style="width: 200px"> <el-icon><Search /></el-icon>&nbsp;&nbsp;搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>

    <el-row class="table">
      <el-table :data="data.clientList">
        <el-table-column prop="orderId" label="订单编号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="client" label="客户名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="address" label="收货地址" show-overflow-tooltip></el-table-column>
        <el-table-column prop="consignee" label="联系人" width="120px"></el-table-column>
        <el-table-column prop="consigneePhone" label="联系电话"></el-table-column>
        <el-table-column prop="status" label="配送状态" width="120px"></el-table-column>
        <el-table-column label="查看商品" align="center">
          <template #default="scope">
            <el-button @click="btnShowProduct(scope.row)" type="success">
              <el-icon><ZoomIn /></el-icon>&nbsp;
              商品详情
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="300px">
          <template #default="scope">
            <el-button @click="btnReceive(scope.row)" type="warning">
              <el-icon><ShoppingBag /></el-icon> &nbsp;
              签收
            </el-button>
            <el-button @click="btnReturn(scope.row)" type="danger">
              <el-icon><WarningFilled /></el-icon>&nbsp;
              退货
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="width: 100%; display: flex;justify-content: right">
        <el-pagination
            style="margin-top: 10px"
            v-model:current-page="data.clientPage.currentPage"
            @current-change="handleCurrentChangeClient"
            layout="prev, pager, next"
            :page-size="5"
            :total="data.clientPage.total"
        />
      </el-row>
    </el-row>

  </div>
  <!--商品详情-->
  <el-dialog v-model="data.detailList.show" title="商品详情" width="800">
    <el-table :data="data.detailList.list">
      <el-table-column type="index" label="序号" width="80px"></el-table-column>
      <el-table-column prop="nickName" label="通用名" show-overflow-tooltip></el-table-column>
      <el-table-column prop="productName" label="商品名" show-overflow-tooltip></el-table-column>
      <el-table-column prop="unit" label="包装规格"></el-table-column>
      <el-table-column prop="suppliers" label="生产厂家" show-overflow-tooltip></el-table-column>
      <el-table-column prop="classs" label="产品批号"></el-table-column>
      <el-table-column prop="quantity" label="数量"></el-table-column>
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="data.detailList.show = false">取消</el-button>
        <el-button type="primary" @click="data.detailList.show = false">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--添加对话框-->
  <el-dialog v-model="data.orderDialog.show" title="添加新订单" style="width: 600px">
    <el-form label-width="120px">

      <el-form-item label="客户名">
        <el-input style="width: 240px" v-model="data.order.client"></el-input>
      </el-form-item>
      <el-form-item label="联系人">
        <el-input style="width: 240px" v-model="data.order.consignee"></el-input>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input style="width: 240px" v-model="data.order.consigneePhone"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input style="width: 240px" v-model="data.order.address"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="data.orderDialog.show = false">取消</el-button>
        <el-button type="primary" @click="orderCertain">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {reactive, onMounted, ref} from "vue";
import axios from "axios";
import moment from "moment/moment";
import router from "@/router";
import {ElMessage} from "element-plus";
//标签
const data = reactive({
  clientList: [],
  history: [],//已完成订单
  select: {
    status: [],
    statusBack: "",
    client: "",
    OrderId: ""
  },
  date: moment(new Date()).format(' YYYY-MM-DD HH:mm'),
  clientPage: {
    currentPage: 1,
    total: ""
  },
  historyPage: {
    currentPage: 1,
    total: ""
  },
  detailList: {
    show: false,
    list: []
  },
  //测试
  orderDetails: {
    detailId: "",
    orderId: 4,
    productId: 3,
    quantity: 20
  },
  //订单添加数据
  order: {
    orderId: "",
    client: "",
    createTime: moment(new Date()).format(' YYYY-MM-DD HH:mm:ss'),
    deliverTime: moment(new Date()).format(' YYYY-MM-DD HH:mm:ss'),
    consignee: "",
    consigneePhone: "",
    address: "",
    userId: ""
  },
//  订单对话框
  orderDialog: {
    show: false
  },
  userId: "",
//  商品显示
  productList: [],
  stockPage: {
    currentPage: 1,
    total: ""
  },
  //商品查询
  product: {
    nickName: "",
    productName: "",
    suppliers: "",
    classs: "",
    type: ""
  },
  classes: [],
  types: []
})
//商品表
const handleCurrentChangeStock = () => {
  axios({
    url: "http://localhost:8080/productView/selectAll",
    method: "get",
    params: {
      currentPage: data.stockPage.currentPage,
      size: 5
    }
  }).then((res) => {
    data.productList = res.data.data;
    data.stockPage.total = res.data.total;
  })
}
//下拉
const initSelect = () => {
  //批号
  axios({
    url: "http://localhost:8080/dict/selectClass",
    method: "get",
    params: ""
  }).then((res) => {
    data.classes = res.data.data;
  })
  //剂型
  axios({
    url: "http://localhost:8080/dict/selectType",
    method: "get",
    params: ""
  }).then((res) => {
    data.types = res.data.data;
  })
}


//初始化
let initList = () => {

  initSelect();//初始化下拉菜单
  //初始化clientList
  handleCurrentChangeClient();
  //初始化状态列表
  initStatus();
//  初始化商品表
  handleCurrentChangeStock();
}


// 定义一个接口来表示订单详情的结构
interface OrderDetail {
  detailId: string;
  orderId: number;
  productId: number;
  quantity: number;
}

const initOrder = () => {

  data.order.orderId = "";
  data.order.client = "";
  data.order.consignee = "";
  data.order.consigneePhone = "",
      data.order.address = "",
      data.order.userId = data.userId;
}

//添加新订单
let insertNewOrder = () => {
  initOrder();
  data.orderDialog.show = true;
}

//成功消息
const successMessage = (message: any) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'success',
  });
}
//失败消息
const errorMessage = (message: any) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'error',
  });
}

let orderCertain = () => {
  axios({
    url: "http://localhost:8080/Order/createNewOrder",
    method: "post",
    params: data.order
  }).then((res) => {
    if (res.data.success) {
      successMessage("选择商品");
      sessionStorage.setItem("orderId", res.data.data.orderId);
      sessionStorage.setItem("creTime", res.data.data.createTime);
      setStatus(res.data.data.orderId);
      router.push("/return/addProduct");
    } else {
      errorMessage("创建失败")
    }
  })
  data.orderDialog.show = false;
}


let setStatus = (orderId: String) => {
  axios({
    url: "http://localhost:8080/deliverOrder/insert",
    method: "post",
    params: {
      orderId: orderId,
      statusId: 31
    }
  })
}


let initStatus = () => {
  axios({
    url: "http://localhost:8080/dict/selectStatus",
    method: "get",
    params: ""
  }).then((res) => {
    data.select.status = res.data.data;
    console.log(data.select.status);
  })
}

onMounted(() => {
  getId();
  initList();
})

//获取userID
const getId = () => {
  console.log(sessionStorage.getItem("userId"));
  const key = sessionStorage.getItem("userId");
  if (key) {
    data.userId = key;
  } else {
    errorMessage("获取userId失败");
  }
}
//client换页
const handleCurrentChangeClient = () => {
  if (data.select.client != "" && data.select.client != "" && data.select.statusBack != "") {
    selectBtn();
  } else {
    axios({
      url: "http://localhost:8080/clientDeliver/selectByUser",
      method: "get",
      params: {
        currentPage: data.clientPage.currentPage,
        userId: data.userId
      }
    }).then((res) => {
      data.clientList = res.data.data;
      data.clientPage.total = res.data.total;
    })
  }


}

//搜索
let selectBtn = () => {

  axios({
    url: "http://localhost:8080/clientDeliver/myQueryClient",
    method: "get",
    params: {
      currentPage: data.clientPage.currentPage,
      orderId: data.select.OrderId,
      client: data.select.client,
      status: data.select.statusBack,
      userId: data.userId,
      size: 5
    }
  }).then((res) => {
    data.clientList = res.data.data;
    data.clientPage.total = res.data.total;
  })
}
//详单显示
const btnShowProduct = (row: any) => {
  data.detailList.show = true;
  axios({
    url: "http://localhost:8080/loadingDetails/selectByOrderId",
    method: "get",
    params: {
      orderId: row.orderId
    }
  }).then((res) => {
    data.detailList.list = res.data.data;
  })
}
//签收按钮
const btnReceive = (row: any) => {
  axios({
    url: "http://localhost:8080/deliverOrder/updateStatus",
    method: "post",
    params: {
      orderId: row.orderId,
      statusId: 34
    }
  }).then((res) => {
    if (res.data) {
      successMessage("签收成功");
      initList();
    } else {
      errorMessage("签收失败");
    }
  })
}
//退货
const btnReturn = (row: any) => {
  axios({
    url: "http://localhost:8080/deliverOrder/updateStatus",
    method: "post",
    params: {
      orderId: row.orderId,
      statusId: 29
    }
  }).then((res) => {
    if (res.data) {
      successMessage("退货中");
      initList();
    } else {
      errorMessage("退货失败");
    }
  })
}
</script>

<style scoped>
.main-box {
  width: 100%;
  height: 100vh;
}

.title-box {
  margin-top: 20px;
  width: 100%;
  height: 100px;
  border: 2px rgba(66, 61, 61, 0.89) dashed;
  background: #efedcb;
  border-radius: 30px;
}

.title {
  font-size: 40px;
  color: #6b5614;
  line-height: 100px;
  margin-left: 40px;
}

.searchArea {
  margin-top: 20px;
  margin-right: 100px;
}

.orderButton {
  margin-bottom: 20px;
  width: 200px;

  margin-left: 990px;
}

.table {
  margin-top: 20px;
}
</style>